<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax基本使用</title>
</head>
<style>
    div{
        width: 200px;
        height: 100px;
        border: 2px red solid;
        font-size: 30px;
        color: red;
    }
</style>
<body>
    <button>点击我</button>
    <div>
     
    </div>

</body>
<script>
    // 获取按钮
    var btn = document.getElementsByTagName('button')[0]
    var box = document.getElementsByTagName('div')[0]
    // 点击事件
    btn.onclick = function(){

        // 1.创建对象
         const xhr = new XMLHttpRequest();

        //  2. 初始化 设置请求方法和url
        // 设置参数 直接在url用？分割 用&链接参数
        xhr.open('GET','http://127.0.0.1:8000/serve?a=100&b=200');

        // 3.发送
        xhr.send();

        // 4.事件绑定  处理服务器返回的结果
        xhr.onreadystatechange = function(){
            // 判断 （服务器端返回了所有的结果）
            if(xhr.readyState === 4){
                // 判断状态码  200成功
                if(xhr.status === 200){
                    // 状态码 状态字符串 所有响应头 响应体
                    console.log(xhr.status)
                    console.log(xhr.statusText)
                    console.log(xhr.getAllResponseHeaders)
                    console.log(xhr.response)

                    // 设置div 文本
                    box.innerHTML = xhr.response
                }else{

                }
            }
        }
}
</script>
</html>